<!--  -->
<template>
<div class='bankBindingBox'>
    <header>
        <span @click='goBankCard'><van-icon name="arrow-left" /></span>
        <span>银行卡绑定</span>
        <span><van-icon name="ellipsis" /></span>
    </header>
    <main>
        <div class="inpCardInfo">请输入您的银行卡信息</div>
        <div class="bankCardInfo">
            <van-field v-model="cardholder" label="持卡人"  required placeholder="持卡人" />
            <van-field v-model="identityCard" label="身份证"  placeholder="身份证" />
            <van-field v-model="useTime" label="身份证有效期"  placeholder="身份证有效期" />
            <van-field v-model="cardNum" label="银行卡号" required placeholder="请输入持卡人的银行卡号(19位)" />
            <van-field v-model="telphone" type="tel" required label="手机号" placeholder='请输入银行预留手机号'/>
        </div>
        <div class="nextBtn" @click='nextToCode'>
            下一步
        </div>
    </main>
    
</div>
</template>

<script>
import {mapMutations} from "vuex"
export default {
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
//这里存放数据
return {
    identityCard:"",//身份证   
    cardholder:'',//持卡人
    useTime:'',//有效期
    cardNum:null,//银行卡号
    telphone:null,//手机号
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
    ...mapMutations(['GET_CARDINFO']),
goBankCard(){
    this.$router.go(-1)
},
nextToCode(){//验证码页面
    var reg=/^1[3-9]\d{9}$/ //手机号以数字1开 第二位不能是0,1,2  只能3-9 后9位任意数字
    var zw=/^[\u4e00-\u9fa5]{1,10}$/ //中文
    var regExp = /^([1-9]{1})(\d{15}|\d{18})$/  //银行卡号
    const numFour=this.cardNum.substr(this.cardNum.length-4)//卡号后4位
    this.GET_CARDINFO({cardholder:this.cardholder,cardNum:numFour,telphone:this.telphone})
    if(reg.test(this.telphone)===true&&zw.test(this.cardholder)===true&&regExp.test(this.cardNum)===true){
        this.$router.push({
            name:'VerificationCode',
        }) 
    }  else{  //6210781240004250007
        alert('信息格式填写错误')
    }  
},
onFailed(){

}
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {
    
},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {

}
}
</script>
<style lang='scss' scoped>
.bankBindingBox{
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: #fff;
    font-size: 1.25rem;
    header{
        height: 3.75rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 1.25rem;
        background:#51547d;
        color: #ffffff;
        padding: 0 .9375rem;
    }
    main{
        flex:1;
        .inpCardInfo{
            height: 3.125rem;
            line-height: 3.125rem;
            padding-left: .625rem; 
            color: #999;
            font-size: 1rem;
        }
        .bankCardInfo{
            display: flex;
            flex-direction: column;
            background: #fff;
            border-bottom: 1px solid #f3f3f3;
            div{
                display: flex;
                align-items: center;
                height: 3.75rem;
            }
        }
        .nextBtn{
            display: flex;
            height: 3.125rem;
            background: #51547d;
            justify-content: space-around;
            align-items: center;
            margin: 1.875rem .9375rem;
            border-radius: 1.875rem;
            color:#fff;
        }
    }
}
</style>